<template>
  <div class="headerbox">
    <van-nav-bar title="详情描述" left-text="" left-arrow @click-left="onClickLeft">
      <template #right>
        <van-icon name="share-o" size="18" @click="showShare = true" />
      </template>
    </van-nav-bar>
    <van-share-sheet   v-model:show="showShare" title="立即分享给好友" :options="options" @select="onSelect" />
    <!-- <div class="header">
      <div class="headerL">
        <a onclick="javascript:history.back(-1)" class="goback"><img src="/images/goback.png" /></a>
      </div>
      <div class="headerC">
        <p>详情描述</p>
      </div>
      <div class="headerR">
        <a href="javascript:void()"><img src="/images/more.png" id="share" /></a>
      </div>
    </div> -->
  </div>
  <div class="clear"></div>
  <div class="h50"></div>
  <div class="clear"></div>
  <div class="aui-m-slider">
    <div class="m-slider" data-ydui-slider>
      <!-- 轮播图 -->
      <!-- <div class="slider-wrapper"> -->
      <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="item in bannerList" :key="item.id">
          <img :src="item.url_text" />
        </van-swipe-item>
      </van-swipe>

      <!-- <div class="slider-item"> <a href="javascript:;"> <img src="/images/01.jpg"> </a> </div> -->
      <!-- <div class="slider-item"> <a href="javascript:;"> <img src="/images/01.jpg"> </a> </div>
        <div class="slider-item"> <a href="javascript:;"> <img src="/images/01.jpg"> </a> </div>
        <div class="slider-item"> <a href="javascript:;"> <img src="/images/01.jpg"> </a> </div> -->
      <!-- </div> -->
      <div class="slider-pagination"></div>
    </div>
  </div>
  <div class="clear"></div>
  <div class="detailbox" v-for="item in detailList" :key="item.id">
    <h4>{{ item.content }}</h4>
    <div class="price"><em>￥</em>{{ item.price }}<span>￥{{ item.price_origin }}</span>
      <font>库存{{ item.stock }}件</font>
    </div>
  </div>
  <div class="allkbox"></div>

  <div class="info_choice">
    <!-- Sku 商品规格 -->
    <div class="commodity">
      <div class="opt">
        <div class="title wanl-gray">
          选择
        </div>
        <div class="option">
          <div class="selected">
            <div>
              <span>尺码</span>
              <span>颜色</span>
            </div>
          </div>
          <div class="option-list">
            <div>
              <div class="cu-tag">
                <span>155/80A/S</span>
              </div>
              <div class="cu-tag">
                <span>160/84A/M1</span>
              </div>
              <div class="cu-tag">
                <span>65/88A/L</span>
              </div>
              <div class="cu-tag">
                <span>更多规格可选</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="wanl-gray" onclick="location.href = 'sku.html' ">
        <img src="/images/go.png">
      </div>
    </div>
    <!-- 服务 -->
    <div class="commodity">
      <div class="opt">
        <div class="title wanl-gray">
          服务
        </div>
        <div class="option">
          <div class="selected">
            <div>
              <span>7天无理由退款</span>
              <span>·</span>
              <span>24小时内发货</span>
              <span>·</span>
              <span>假一赔十</span>
            </div>
          </div>
        </div>
      </div>
      <div class="wanl-gray" onclick="location.href = 'server.html' ">
        <img src="/images/go.png">
      </div>
    </div>
  </div>
  <div class="clear"></div>
  <div class="allkbox"></div>
  <div class="clear"></div>
  <div class="detailbox_2">
    <div class="top">
      <p class="tit active">产品参数</p>
      <p class="tit">商品评价</p>
    </div>
    <!-- 产品参数 -->
    <div class="rate">
      <ul>
        <li>品牌: 水星被里</li>
        <li>材质: 棉棉</li>
        <li>种类: 棉</li>
        <li>风格: 田园</li>
        <li>成分含量: 100%</li>
        <li>图案: 植物花卉</li>
        <li>件数: 4件</li>
        <li>产品等级: 合格品</li>
        <li>床品工艺: 其他</li>
        <li>面料支数: 40支</li>
        <li>面料密度: .</li>
        <li>货号: AY590404AY590804</li>
        <li>织造工艺: 斜纹</li>
        <li>款式: 床单式 床笠式</li>
        <li>适用人群: 大众</li>
        <li>被面材质: 棉</li>
        <li>适用床尺寸: 1.2m（4英尺）床 1.5m（5英尺）床 1.8m（6英尺）床</li>
        <li>颜色分类: 莎莉亚(床笠款) 莎莉亚(床单款) 安逸若兮(鸟蛋绿/床单款) 安逸若兮(鸟蛋绿/床笠款) 繁花梦语(婴儿蓝/床笠款) 繁花梦语(婴儿蓝/床单款) 【100%全棉 原创设计】 【清新优雅】 【手感柔软】
          【原创设计】 花西雅(床单款) 花西雅(床笠款)</li>
      </ul>
      <img src="/images/02.jpg" />
      <img src="/images/04.jpg" />
      <img src="/images/05.jpg" />
    </div>
    <!-- 商品评价 -->
    <div class="rate" style="display:none;">
      <div class="rate-header">
        <div class="rate-score">
          <h4>与描述相符</h4>
          <strong>4.5</strong>
        </div>
        <div class="rate-graph">
          <img src="/images/sc.png" alt="" style="width:20px;">
          <img src="/images/sc.png" alt="" style="width:20px;">
          <img src="/images/sc.png" alt="" style="width:20px;">
          <img src="/images/sc.png" alt="" style="width:20px;">
        </div>
      </div>
      <div class="rate-content">
        <div>
          <div class="review-box">
            <div class="review-item">
              <div class="from-whom">
                <div class="avatar">
                  <img src="/images/avatar-01.jpg" alt="" />
                </div>
                <div class="name">张三</div>
              </div>
              <div class="review-details">
                <div class="content">非常好</div>
                <div>
                  <img src="/images/02.jpg" alt="">
                  <img src="/images/02.jpg" alt="">
                  <img src="/images/02.jpg" alt="">
                  <img src="/images/02.jpg" alt="">
                </div>
                <div class="time">2022-09-19 01:05:57</div>
              </div>
            </div>
          </div>
          <div class="review-box">
            <div class="review-item">
              <div class="from-whom">
                <div class="avatar">
                  <img src="/images/avatar-01.jpg" alt="" />
                </div>
                <div class="name">张三</div>
              </div>
              <div class="review-details">
                <div class="content">非常好</div>
                <div>
                  <img src="/images/02.jpg" alt="">
                </div>
                <div class="time">2022-09-19 01:05:57</div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <!-- <div class="rate-empty">该商品还没有人写评价呢</div> -->
        </div>
      </div>
    </div>
  </div>
  <div class="clear"></div>
  <div class="h54"></div>
  <div class="footerbox">
    <div class="footer2">
      <van-action-bar style="max-width: 512px;" v-for="item in detailList">
        <a href="tel:{{ mobile }}"><van-action-bar-icon icon="chat-o" text="客服" dot @click="getMobile" /></a>
        <router-link to="/cart">
          <van-action-bar-icon icon="cart-o" text="购物车" :badge="total" v-if="total > 0" />
          <van-action-bar-icon icon="cart-o" text="购物车" v-else />
        </router-link>

        <!-- <van-action-bar-icon icon="cart-o" text="购物车" v-else /> -->
        <!-- <van-action-bar-icon icon="shop-o" text="店铺" badge="12" /> -->
        <van-action-bar-button type="warning" text="加入购物车" @click="addCart()" />
        <router-link style="width: 40%; z-index: 1;" 
          :to="{ name: 'settlement', query: { ids: item.id, price: item.price, isStatic: 1 } }"><van-action-bar-button
            type="danger" text="立即购买" /></router-link>
      </van-action-bar>

    </div>
  </div>
  <!-- 拼团信息 -->
  <div class="teamwork">
    <img src="/images/teamwork.jpg" alt="">
  </div>
  <!-- 分享面板 -->
  <div class="share">
    <img src="/images/share.png" alt="">
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { showToast } from 'vant';
import { POST } from "../services/request";
// 插件
import { showSuccessToast, showFailToast } from 'vant';

const id = ref(null);
const route = useRoute();
const router = useRouter();
// 存详情页的数据列表
const detailList = ref([]);
const bannerList = ref([]);
const cartList = ref([]);
const total = ref(0);
const pdprice = ref(0);
const mobile = ref(null);
// 接收用户的值
const userData = JSON.parse(localStorage.getItem('LoginUser'));
// console.log(userData.id);


onMounted(async () => {
  // 商品id接收传过来的值
  id.value = route.params.id;
  await getDetail();
  await getBanner();
  await getCart();
})
// 获取详情页数据请求
const getDetail = async () => {
  const detailRes = await POST({
    url: '/Detail/getDetail',
    params: {
      id: id.value
    }
  })
  if (detailRes.code === 1) {
    // console.log(111);
    detailList.value = detailRes.data;
    // console.log(detailList.value);
  }
}
// 轮播图
const getBanner = async () => {
  const bannerRes = await POST({
    url: '/Detail/getBananer',
    params: {
      id: id.value
    }
  })
  if (bannerRes.code === 1) {
    bannerList.value = bannerRes.data;
    // console.log(bannerList.value,11111111111);
  }
}

// 获取购物车的数据
const getCart = async () => {

  const cartRes = await POST({
    url: '/Detail/getCart',
    params: {
      id: id.value,
      uid: userData.id
    }
  })

  if (cartRes.code === 1) {
    // console.log(1111);
    cartList.value = cartRes.data;
    total.value = cartList.value.total;
    mobile.value = cartList.value.mobile;
    // console.log(mobile.value);

    // console.log(cartList.value,11111111111);
  }
}

const onClickLeft = () => history.back();

// 加入购物车
const addCart = async () => {
  // console.log('加入购物车');
  const addRes = await POST({
    url: '/Detail/addCart',
    params: {
      pid: id.value,
      uid: userData.id
    }
  })
  if (addRes.code === 1) {
    showSuccessToast(addRes.msg);
    getCart();
  } else {
    showFailToast(addRes.msg);
  }
}


// 分享面板
const showShare = ref(false);
const options = [
  { name: '微信', icon: 'wechat' },
  { name: '微博', icon: 'weibo' },
  { name: '复制链接', icon: 'link' },
  { name: '分享海报', icon: 'poster' },
  { name: '二维码', icon: 'qrcode' },
];

const onSelect = (option) => {
  showToast(option.name);
  showShare.value = false;
};



</script>